<template>
    <van-nav-bar title="商品详情" left-arrow @click-left="onClickLeft" />
    <van-image width="100%" height="260" src="https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg" @click="showimg"/>
    <div>{{ productdata .name}}</div>
    <div>{{productdata.subname}}</div>
    <div style="color:red"><em>￥</em>{{productdata.price}}</div>
    <hr>
    <div class="brief">
       <div v-html="productdata.brief"></div>

    </div>

    <van-action-bar>
        <van-action-bar-icon icon="chat-o" text="客服"  />
        <van-action-bar-icon icon="cart-o" text="购物车" badge="5" />
        <van-action-bar-icon icon="shop-o" text="店铺" />
        <van-action-bar-button type="warning" text="加入购物车" />
        <van-action-bar-button type="danger" text="立即购买" />
    </van-action-bar>

</template>

<script setup lang="ts">
import { reactive} from 'vue';

const onClickLeft = () => history.back();
import { showImagePreview } from 'vant';

const productdata= reactive({
    name:'商品名称',
    subname:'商品副标题',
    price:100,
    brief:'商品详情'
})
const showimg = () => {
showImagePreview({
  images: [
    'https://fastly.jsdelivr.net/npm/@vant/assets/apple-1.jpeg',
    'https://fastly.jsdelivr.net/npm/@vant/assets/apple-2.jpeg',
  ],
  startPosition: 1,
  closeable:true
});
}
</script>

<style scoped>

</style>